<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS轮播图</title>
    <style>
        .outside{
            margin:10px auto;
        }
        #prev,#next,.pic{
            float:left;
        }
        img{
            width:960px;
            /*clear:both;*/
        }
        #btn{
            width:120px;
            height:540px;
            margin:10px;

        }
        button{
            width:100px;
            margin:278px auto;
        }
        .circle{
            width:20px;
            height:20px;
            border-radius: 10px;
            background-color: aqua;
            clear:both;
            margin:0 auto;
        }
    </style>
</head>
<body>
<!--上边的部分：左右按钮和图片-->
    <div class="outside">
        <div id="prev"><button class="prev">上一张</button></div>
        <div class="pic"><img id = "img_id" src="images/1.jpg"></div>
        <div id="next"><button class="next">下一张</button></div>
    </div>
<!--下边的部分，四张图四个圆点-->
    <div id="btn">
        <button id="dian1" class="circle"></button>
        <button id="dian2" class="circle"></button>
        <button id="dian3" class="circle"></button>
        <button id="dian4" class="circle"></button>
    </div>

    <script>
        //下边是想给四个点添加属性
        // var b = document.getElementById("btn");
        var dian1 = document.getElementById("dian1");
        dian1.onclick = function () {
            img.setAttribute("src","images/1.jpg");
        };
        var dian2 = document.getElementById("dian2");
        dian2.onclick = function () {
            img.setAttribute("src","images/2.jpg");
        };
        var dian3 = document.getElementById("dian3");
        dian3.onclick = function () {
            img.setAttribute("src","images/3.jpg");
        };
        var dian4 = document.getElementById("dian4");
        dian4.onclick = function () {
            img.setAttribute("src","images/4.jpg");
        };
        //此处想做轮播图
        var img=document.getElementById("img_id"); //定义变量 获取图片属性
        var array=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];//定义图片列表
        var number=0;
        var interval=setInterval(//设置计时器
            function(){
                var src=array[number];
                img.setAttribute("src",src);
                if(number>=3){
                    number=0
                }else{
                    number += 1
                }
            },2000//每2秒切换一张图片
        );

        //下边是想给左右按钮添加属性
        var self=document.getElementById("img_id");
        if ('self="images/1.jpg"'){number=1;}
        if ('self="images/2.jpg"'){number=2;}
        if ('self="images/3.jpg"'){number=3;}
        if ('self="images/4.jpg"'){number=4;}
        var prev=document.getElementById("prev");
        number -= 1;
        var next=document.getElementById("next");
        number += 1;
        if('number=5'){number=1}
        if('number=0'){number=4}
        var src=array[number];
        img.setAttribute("src",src);
    </script>
</body>
</html>